<template>
	<view class="wrap">
		<view class="wrap__title"></view>
		<view class="wrap__main">
			<view class="main__item">
				<text class="item__title">{{$t("ipo.name")}}</text>
				<text class="item__value">{{info.name}}</text>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("ipo.price")}}</text>
				<text class="item__value">{{info.shijia}}</text>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("ipo.deadline")}}</text>
				<text class="item__value">{{info.jiezhidate}}</text>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("ipo.nums")}}</text>
				<view class="item__right">
					<uni-number-box v-model="buyNum" :max="999999999999" :min="1" background="#458EF4" color="#fff" />
				</view>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("ipo.amount")}}</text>
				<text class="item__value item__point">{{buyPrice}}</text>
			</view>
			<view class="main__item">
				<text class="item__title">{{$t("ipo.freeze")}}</text>
				<text class="item__value item__point">{{buyPrice}}</text>
			</view>
		</view>
		<view class="wrap__btn" @click="enterClick">{{$t('ipo.buyBtn')}}</view>
		<buyEnter v-if="isShowEnter" :info="info" :isShowEnter.sync="isShowEnter" :buyNum="buyNum" :buyPrice="buyPrice"></buyEnter>
	</view>
</template>

<script>
	import buyEnter from '@/components/ipo/buyEnter.vue'
	export default{
		components:{
			buyEnter
		},
		data(){
			return {
				navIndex:0, //导航索引
				isShowEnter:false,
				info:{}, //认购股票详情
				buyNum:0, //购买数量
			}
		},
		computed:{
			buyPrice(){ //购买价格
			  let {shijia} = this.info
				let price = Number(shijia) * this.buyNum
				return price.toFixed(2)
			}
		},
		onLoad(option) {
			this.info = JSON.parse(option.info)
		},
		methods:{
			enterClick(){
				this.isShowEnter = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		min-height: 100vh;
		box-sizing: border-box;
		.wrap__title{
			width: 750rpx;
			height: 30rpx;
			/* background: #0E101F; */
		}
		.wrap__main{
			padding:  0 30rpx;
			box-sizing: border-box;
			.main__item{
				@include flexRowAlign();
				font-size: 32rpx;
				color: #fff;
				height: 98rpx;
				// border-bottom: 1rpx solid #CCCCCC;
				.item__title{
					min-width: 160rpx;
					text-align: justify;
					text-align-last: justify;
				}
				.item__value{
					margin-left: 40rpx;
				}
				.item__right{
					margin-left: 40rpx;
					@include flexRowAlign();
					::v-deep .uni-numbox__value{
						width: 150rpx;
						height: 68rpx;
					}
				}
				.item__point{
					color: #DF4140;
				}
			}
		}
		.wrap__btn{
			margin: 200rpx auto;
			width: 600rpx;
			height: 98rpx;
			background: #458EF4;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #FFFFFF;
			@include flexCenter();
		}
	}
</style>